<template>
	<view class="input-box">
		<picker :disabled="disabled" mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :range="multiArray" range-key="label" :value="defaultValue">
			<view class="picker" :class="disabled ? 'text-grey' : ''">
				<text class="text-grey" style="font-size: 12px" v-if="!chooseObj.value">请选择</text>
				{{ chooseObj.label }}&nbsp;
			</view>
		</picker>
	</view>
</template>
<script>
import dayjs from 'dayjs';
const now = dayjs();

const seasons = [
	{
		label: '第1季度(01-01至03-31)',
		value: 1,
		seasonDayStart: '01-01',
		seasonDayEnd: '03-31'
	},
	{
		label: '第2季度(04-01至06-30)',
		value: 2,
		seasonDayStart: '04-01',
		seasonDayEnd: '06-30'
	},
	{
		label: '第3季度(07-01至09-30)',
		value: 3,
		seasonDayStart: '07-01',
		seasonDayEnd: '09-30'
	},
	{
		label: '第4季度(10-01至12-31)',
		value: 4,
		seasonDayStart: '10-01',
		seasonDayEnd: '12-31'
	}
];

export default {
	props: {
		// 绑定值，可以是主键ID或者对象（对象至少需要包含主键id，如果包含了id，fullName则程序会减少一步找数据时间）
		modelValue: {
			type: [Object, String],
			default() {
				return '';
			}
		},
		// 禁用
		disabled: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	emits: ['update:modelValue', 'change'],
	watch: {
		modelValue: {
			handler(val, oldVal) {
				if (!val) {
					return;
				}
				if (val === this.chooseObj) {
					return;
				}
				if (val.value) {
					const sArray = val.value.split('-');
					const season = seasons[sArray[1] * 1 - 1];
					this.chooseObj = {
						label: `${sArray[0]}年${season.label}`,
						value: `${val.value}`,
						year: sArray[0],
						season: sArray[1],
						seasonDayStart: sArray[0] + '-' + season.seasonDayStart,
						seasonDayEnd: sArray[0] + '-' + season.seasonDayEnd
					};
					return;
				}
				if (val.seasonDayStart && val.seasonDayEnd) {
					const seasonDay = dayjs(val.seasonDayStart);
					let month = seasonDay.month() + 1;
					let index = 0;
					if (month >= 10) {
						index = 3;
					} else if (month >= 7) {
						index = 2;
					} else if (month >= 4) {
						index = 1;
					}
					const season = seasons[index];
					this.chooseObj = {
						label: `${sArray[0]}年${season.label}`,
						value: `${seasonDay.year()}-${index + 1}`,
						year: seasonDay.year(),
						season: index + 1,
						seasonDayStart: seasonDay.year() + '-' + season.seasonDayStart,
						seasonDayEnd: seasonDay.year() + '-' + season.seasonDayEnd
					};
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			multiArray: [],
			index: 0,
			multiIndex: 0,
			chooseObj: {},
			defaultValue: []
		};
	},
	created() {
		this.multiArray = [];
		this.loadData();
	},
	methods: {
		MultiChange(e) {
			const { value } = e.detail;

			const chooseValue = [];
			for (var i = 0; i < value.length; i++) {
				chooseValue.push(this.multiArray[i][value[i]]);
			}
			this.chooseObj = {
				label: `${chooseValue[0].label}年${chooseValue[1].label}`,
				value: `${chooseValue[0].value}-${chooseValue[1].value}`,
				year: chooseValue[0].value,
				season: chooseValue[1].value,
				seasonDayStart: chooseValue[0].value + '-' + chooseValue[1].seasonDayStart,
				seasonDayEnd: chooseValue[0].value + '-' + chooseValue[1].seasonDayEnd
			};
			this.$emit('update:modelValue', this.chooseObj);
			this.$emit('change', this.chooseObj);
		},
		MultiColumnChange(e) {},

		loadData() {
			const nowYear = now.year();
			// 年
			const array = [];
			for (var i = nowYear - 50; i <= nowYear + 50; i++) {
				array.push({
					label: i,
					value: i
				});
			}
			this.multiArray.push(array);
			const month = now.month() + 1;
			let index = 0;
			if (month >= 10) {
				index = 3;
			} else if (month >= 7) {
				index = 2;
			} else if (month >= 4) {
				index = 1;
			}
			this.multiArray.push(seasons);
			this.defaultValue.push(50, index);
		}
	}
};
</script>
<style scoped>
.input-box {
	position: relative;
	overflow: hidden;
	flex: 1;
	line-height: 1;
	font-size: 14px;
	flex-direction: row;
	align-items: center;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 12px 15px;
}
.text-grey {
	color: #999;
}
</style>
